
<meta charset="utf-8">
<link rel="stylesheet" href="../../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../../assets/css/datepicker.css" />
<link rel="stylesheet" href="../../assets/css/ui.jqgrid.css" />

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		我的素材库 
	</h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="well well-sm">
			<button class="btn btn-primary" onclick="createArticle()">创建素材</button>
		</div>

		<div class="col-xs-12">
			<div id="myArticleList" style="font-size: 20px;">
			</div>
			<div id="loading" style="font-size: 20px;display: none;">Loading....</div>
			<button id="loadMoreBtn"  style="display: none;"  class="btn btn-info" type="button"  onclick="refreshArticleList()">加载更多</button>
		</div>

		<script type="text/javascript">
			var $path_base = "../..";//in Ace demo this will be used for editurl parameter
		</script>

		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->


</div>
<!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	function createArticle() {
		window.location = "ajax.html#page/newArticle";
	}
	var currPage = 1;
	var rowSize = 10;
	var currMaxRowIndex = 1;
	var allLoadDone = false;
	var scripts = [ null,
			"../../assets/js/date-time/bootstrap-datepicker.min.js",
			"../../assets/js/jquery.jscroll.min.js",
			null ]
	ace
			.load_ajax_scripts(
					scripts,
					function() {
						//inline scripts related to this page
						jQuery(function($) {
							refreshArticleList();
							
							$(document).scrollTop(0);
							$(window).scroll(function(){
								  //console.log("$(document).scrollTop():" + $(document).scrollTop() + " $(document).height():" + $(document).height()
								//		   + " $(window).height():" + $(window).height());
								if(allLoadDone) {
									return;
								}
						        if($(document).scrollTop() >= $(document).height() - $(window).height()){
						        	$("#loading").show();
						        	refreshArticleList();
						        	$("#loading").hide();
						        }
						      });	
						});
					});
	
	


	function refreshArticleList() {
		console.log("refreshArticleList");
		$
				.ajax({
					type : "POST",
					url : "../../getArticleList2",
					data : {
						page : currPage,
						rows : rowSize
					},
					async : false,
					dataType : "json",
					success : function(data) {
						if(currPage >= data.total) {
							$("#loadMoreBtn").attr("disabled", true);							
							$("#loadMoreBtn").hide();							
							allLoadDone = true;
						} else {
							currPage++;
						}
						console.log("data.length:" + data.rows.length);
						for (var i = 0; i < data.rows.length; i++) {
							var oneArticleHtml = "<div  style='border: 3px dashed #ccc;margin-top:5px;'   >";
							oneArticleHtml += "<table   class='table table-striped table-bordered table-hover'>";
							var name = data.rows[i].name;
							var url = data.rows[i].url;
							var remark = data.rows[i].remark;
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>素材" + (currMaxRowIndex++) + "/" + data.records;
							oneArticleHtml += " ID:" + data.rows[i].id;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>状态</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		(data.rows[i].status == "true") ? "已读完" : "<b>阅读中...</b>";
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							if(name != "") {
								oneArticleHtml += "<tr>";
								oneArticleHtml += "	  <td>名称</td>";
								oneArticleHtml += "	  <td>";
								oneArticleHtml += 		name;
								oneArticleHtml += "	  </td>";
								oneArticleHtml += "</tr>";
							}
							if(url != null && url != "") {
								oneArticleHtml += "<tr>";
								oneArticleHtml += "	  <td>来源</td>";
								oneArticleHtml += "	  <td>";
								oneArticleHtml += 		"<a target='_blank' href='" + url + "'>" + url.substr(0, 15) + "...</a>";
								oneArticleHtml += "	  </td>";
								oneArticleHtml += "<tr>";
							}
							if(remark != "") {
								oneArticleHtml += "<tr>";
								oneArticleHtml += "	  <td>备注</td>";
								oneArticleHtml += "	  <td>";
								oneArticleHtml += 		remark;
								oneArticleHtml += "	  </td>";
								oneArticleHtml += "<tr>";
							}
							oneArticleHtml += "	  <td>类型</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		data.rows[i].type;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>共享</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		data.rows[i].openFlag;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>创建时间</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		data.rows[i].lastUpt;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td align='center' colspan=2>";
							oneArticleHtml += "      <button class='btn btn-info' type='button' onclick='showSenDetail(" + data.rows[i].id +  ")' >句子</button>&nbsp;&nbsp;<button class='btn btn-info' type='button'  onclick='showWordDetail(" + data.rows[i].id +  ")'  >单词</button>&nbsp;&nbsp;<button class='btn btn-info' type='button' onclick='deleteArticle(this, " + data.rows[i].id  + ")' >删除</button>";
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "</table>";
							oneArticleHtml += "</div>";
							 
							//alert("oneArticleHtml:" + oneArticleHtml);
							$("#myArticleList").append(oneArticleHtml);
						}
					},
					error : function(data) {
						alert("submit result error, please contact administrator");
					}

				});
	}
</script>
